<template>
    <div>
        <MBX
            level="商品管理"
            level2="商品列表"
        ></MBX>
        <br>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input v-model="page.query">
                        <el-button
                            slot="append"
                            icon="el-icon-search"
                            @click="xr(page.query)"
                        ></el-button>
                    </el-input>
                </el-col>
                <el-col :span="18">
                    <el-button
                        type="primary"
                        @click="$router.push('/goodsadd')"
                    >添加商品</el-button>
                </el-col>
            </el-row>
            <!-- 表格部分 -->
            <el-table :data="goods">
                <el-table-column
                    label="#"
                    type="index"
                ></el-table-column>
                <el-table-column
                    label="商品名称"
                    prop="goods_name"
                ></el-table-column>
                <el-table-column
                    label="商品价格"
                    prop="goods_price"
                ></el-table-column>
                <el-table-column
                    label="商品重量"
                    prop="goods_weight"
                ></el-table-column>
                <el-table-column label="创建时间">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.upd_time|time}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div>
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                size="mini"
                            ></el-button>
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                size="mini"
                                @click="goodsdel(scope.row)"
                            ></el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格部分 -->
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pagenum"
                :page-sizes="[2, 5, 10, 15]"
                :page-size="page.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
            <!-- 分页 -->
        </el-card>
    </div>
</template>

<script>
export default {
  data() {
    return {
      page: {
        query: "",
        pagenum: 1,
        pagesize: 2
      },
      total: 0,
      goods: []
    };
  },
  created() {
    this.xr();
  },
  methods: {
    async xr() {
      let res = await this.$API.shangpinliebiao(this.page);
      console.log("商品列表", res);
      this.total = res.total;
      this.goods = res.goods;
    },
    handleSizeChange(v) {
      this.page.pagesize = v;
      this.xr();
    },
    handleCurrentChange(v) {
      this.page.pagenum = v;
      this.xr();
    },
    // 删除商品
    async goodsdel(row) {
      console.log("删除商品", row);
      let res = await this.$API.shanchushangpin(row.goods_id);
      this.xr();
    }
  }
};
</script>

<style scoped >
</style>
